import React, { useState } from "react";
import { Layout } from 'antd';
import SiderNav from '@/components/SiderNav';
import HeaderBar from '@/components/HeaderBar';
import MenuRoutes from '@/router/menus';

const { Sider, Header, Content, Footer } = Layout;

const Pages = () => {
      const [collapsed, setCollapsed] = useState(false);
      const onCollapse = () => {
            setCollapsed(!collapsed)
      };

      return (
            <Layout style={{ minHeight: '100vh' }}>
                  <Sider
                        collapsible
                        // trigger={null}
                        collapsed={collapsed}
                        onCollapse={onCollapse}
                  >
                        <SiderNav collapsed={collapsed} />
                  </Sider>
                  <Layout className="site-layout">
                        <Header className="site-layout-background" >
                              <HeaderBar collapsed={collapsed} />
                        </Header>
                        <Content>
                              <MenuRoutes />
                        </Content>
                        <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
                  </Layout>
            </Layout>
      );
}
export default Pages;